<template>
	<view>
		<view class="topVue" :style="{background: background, height: height}">
			<view class="status" :style="{height:statusBarHeight}"></view>
			<view class="header relative" :style="{height:headerHeight}">
				<slot></slot>
			</view>
		</view>
		<view :style="{height: height}"></view>
	</view>
</template>

<script>
	export default {
		props:{
			background: {
				type: String,
				default: "linear-gradient(to bottom, #F0E9F8, #F0E9F8, #FDE5E7, #FBEFF1, #FDFAFC, #fff);"
			}
		},
		data(){
			return {
				statusBarHeight: "",
				height: "",
				headerHeight: ""
			}
		},
		mounted() {
			let _this = this
			wx.getSystemInfo({
				success(res){
					// 状态栏高度
					_this.statusBarHeight = res.statusBarHeight + "px";       
					// 获取胶囊信息
					let menuButtonObject = wx.getMenuButtonBoundingClientRect();
					console.log(menuButtonObject)
					let menuButtonTop = menuButtonObject.top//胶囊距离顶部距离
					_this.height = res.statusBarHeight + menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2 + "px";
					_this.headerHeight = menuButtonObject.height + (menuButtonTop - res.statusBarHeight) * 2 + "px"
				}
			})
		},
		methods: {
			 
		}
	}
</script>

<style lang="less" scoped>
	.topVue {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		.header {
			width: 100%;
		}
	}
</style>